<template>
	<view>
		<view class="my-drop-down-list" :style="{width:width + 'rpx',backgroundColor:bgColor}" v-if="dropDownShow">
			<view class="my-drop-down-list-item" v-for="item in list" :key="item.value" @click.stop="onDropDown(item)">
				{{item.label}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ["onDropDown"],
		props: {
			width: {
				type: String,
				default: "280"
			},
			bgColor: {
				type: String,
				default: "#ffffff"
			},
			list: {
				type: Array,
				default: () => []
			},
			dropDownShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			}
		},

		methods: {
			onDropDown(item) {
				this.$emit("onDropDown", JSON.stringify(item));
			},
		},
	}
</script>

<style lang="scss" scoped>
	.my-drop-down-list {
		height: 240rpx;
		overflow-y: auto;
		box-shadow: 2rpx 2rpx 2rpx 2rpx #888888;


		.my-drop-down-list-item {
			width: 100%;
			padding: 20rpx;
			color: #333;
			font-size: 28rpx;
			word-break: break-all;
		}
	}
</style>
